<%@ page import="com.cn.entity.goods.Goods_cart" %>
<%@ page import="org.apache.ibatis.session.SqlSession" %>
<%@ page import="com.cn.util.SqlsesstionUtil" %>
<%@ page import="com.cn.Mapper.goodsMapper.CartMapper" %>
<%@ page import="java.util.List" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <title>layout 管理系统大布局 - Layui</title>
  <%--  引入jQuery包  --%>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.js"></script>
  <!-- 引入layui css -->
  <link rel="stylesheet" type="text/css" href="https://www.layuicdn.com/layui-v2.5.6/css/layui.css" />

  <!-- 引入layui js -->
  <script src="https://www.layuicdn.com/layui-v2.5.6/layui.js"></script>

  <style type="text/css">
    <%-- css样式 --%>
    #CartTable{
      width: 900px;
      height: 100px;
      margin-top: 10px;
      margin-left: 60px
    }
    #payment{

      margin-top: 10px;
      margin-left: 800px;

    }
    #sum{
      margin-top: 10px;
      margin-left: 800px;
      color: gray;
    }

    #cardId{
      width: 200px;
      height: 40px;
      float:left;
    }

 #comfirm-vip{
   margin-left: 60px;
 }
  </style>
</head>

<body>
<div class="layui-layout layui-layout-admin">
  <div class="layui-header">
    <div class="layui-logo layui-hide-xs layui-bg-black">超市收银系统</div>
    <!-- 头部区域（可配合layui 已有的水平导航） -->
    <ul class="layui-nav layui-layout-left">
      <!-- 移动端显示 -->
      <li class="layui-nav-item layui-show-xs-inline-block layui-hide-sm" lay-header-event="menuLeft">
        <i class="layui-icon layui-icon-spread-left"></i>
      </li>

      <li class="layui-nav-item layui-hide-xs"><a href="GoodsHot.jsp">商品热度</a></li>
      <li class="layui-nav-item layui-hide-xs"><a href="AdminOperateView.jsp">管理员后台</a></li>
      <li class="layui-nav-item">
        <a href="javascript:;">账单流水</a>
        <dl class="layui-nav-child">
          <dd><a href="OrderView.jsp">账单详情</a></dd>
          <dd><a href="illustration%20.jsp">图表分析</a></dd>
          <dd><a href="">menu 33</a></dd>
        </dl>
      </li>


    </ul>
    <ul class="layui-nav layui-layout-right">
      <li class="layui-nav-item layui-hide layui-show-md-inline-block">
        <a href="javascript:;">
          <img src="//tva1.sinaimg.cn/crop.0.0.118.118.180/5db11ff4gw1e77d3nqrv8j203b03cweg.jpg" class="layui-nav-img">
          tester
        </a>
        <dl class="layui-nav-child">
          <dd><a href="">Your Profile</a></dd>
          <dd><a href="">Settings</a></dd>
          <dd><a href="">Sign out</a></dd>
        </dl>
      </li>

      <li class="layui-nav-item" lay-header-event="menuRight" lay-unselect>
        <a href="javascript:;">
          <i class="layui-icon layui-icon-more-vertical"></i>
        </a>
      </li>
    </ul>
  </div>

  <div class="layui-side layui-bg-black">
    <div class="layui-side-scroll">
      <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
      <ul class="layui-nav layui-nav-tree" lay-filter="test">
        <li class="layui-nav-item layui-nav-itemed">
          <a class="" href="javascript:;">零食类</a>
          <dl class="layui-nav-child">
            <dd><a href="javascript:void(0);"  id="1"  onclick="add(this.id)">妙脆角</a></dd>
            <dd><a href="javascript:void(0);"  id="2"  onclick="add(this.id)">冰淇淋</a></dd>
            <dd><a href="javascript:void(0);"  id="3"  onclick="add(this.id)">巧克力</a></dd>
            <dd><a href="javascript:void(0);"  id="4"  onclick="add(this.id)">瓜子</a></dd>
            <dd><a href="javascript:void(0);"  id="5"  onclick="add(this.id)">辣条</a></dd>

          </dl>
        </li>


 <%--       <li class="layui-nav-item">
          <a href="javascript:;">水果类</a>
          <dl class="layui-nav-child">
            <dd><a href="javascript:void(0);"  id="6"  onclick="add(this.id)">苹果</a></dd>
            <dd><a href="javascript:void(0);"  id="7"  onclick="add(this.id)">香蕉</a></dd>
            <dd><a href="javascript:void(0);"  id="8"  onclick="add(this.id)">葡萄</a></dd>
            <dd><a href="javascript:void(0);"  id="9"  onclick="add(this.id)">橘子</a></dd>
            <dd><a href="javascript:void(0);"  id="10"  onclick="add(this.id)">桃子</a></dd>
          </dl>
        </li>--%>
        <li class="layui-nav-item layui-nav-itemed">
          <a class="" href="javascript:;">零食类</a>
          <dl class="layui-nav-child">
            <dd><a href="javascript:void(0);"  id="6"  onclick="add(this.id)">苹果</a></dd>
            <dd><a href="javascript:void(0);"  id="7"  onclick="add(this.id)">香蕉</a></dd>
            <dd><a href="javascript:void(0);"  id="8"  onclick="add(this.id)">葡萄</a></dd>
            <dd><a href="javascript:void(0);"  id="9"  onclick="add(this.id)">橘子</a></dd>
            <dd><a href="javascript:void(0);"  id="10"  onclick="add(this.id)">桃子</a></dd>

          </dl>
        </li>

        <li class="layui-nav-item layui-nav-itemed">
          <a href="javascript:;">酒水饮料</a>
          <dl class="layui-nav-child">

            <dd><a href="javascript:void(0);"  id="11"  onclick="add(this.id)">青岛啤酒</a></dd>
            <dd><a href="javascript:void(0);"  id="12"  onclick="add(this.id)">芬达</a></dd>
            <dd><a href="javascript:void(0);"  id="13"  onclick="add(this.id)">美年达</a></dd>
            <dd><a href="javascript:void(0);"  id="14"  onclick="add(this.id)">雪碧</a></dd>
            <dd><a href="javascript:void(0);"  id="15"  onclick="add(this.id)">科罗娜</a></dd>


          </dl>
        </li>

      </ul>
    </div>
  </div>

  <div class="layui-body">
<%--    //购物车--%>
  <%
    SqlSession sqlSession= SqlsesstionUtil.getSqlSession();
    CartMapper cartMapper=sqlSession.getMapper(CartMapper.class);
    List<Goods_cart> cartList=cartMapper.ShowCart();
    int subtotal=0;
   int sum=0;
//  创建cart数组
  %>

  <%--验证vip模块--%>
  <div id="comfirm-vip">
      <button class="layui-btn layui-btn-normal" type="submit" onclick="getCartId()">校验VIP</button>
      <input type="text" id="cardId" lay-verify="required" placeholder="请输入VIP卡号" class="layui-input">
      <span id="span1"></span>
  </div>
  <%--验证vip模块--%>
  <table id="CartTable" name="CartTable" class="layui-table">
    <tr>
      <td>商品编号</td>
      <td>商品名称</td>
      <td>商品单价</td>
      <td>商品数量</td>
      <td>商品小计</td>
      <td colspan="2">操作</td>
    </tr>

    <% for(Goods_cart cart: cartList){%>
    <tr id="tr_<%=cart.getGoods_id()%>">
      <td><%=cart.getGoods_id()%></td>
      <td><%=cart.getGoods_name()%></td>

      <td><%=cart.getGoods_price()%></td>
      <td><%=cart.goods_number%></td>
      <%
        sum=sum+cart.getGoods_subtotal();
      %>
      <td><%=cart.getGoods_subtotal()%></td>
      <td>  <a class="layui-btn layui-btn-danger layui-btn-xs"  href="javascript:void(0);" onclick="confirm(id=<%=cart.getGoods_id()%>)">退单</a></td>
      <td> <a class="layui-btn layui-btn-xs"  href="javascript:void(0);" onclick=AutoNumber(<%=cart.getGoods_id()%>)>+1</a></td>
    </tr>

    <%}%>
  </table>




<%--  结算模块  --%>
<div>

  <div id="pay-div" >
<h1 id="sum">共计：<%=sum%></h1>

    <a class="layui-btn layui-btn-normal"  id="payment"  onclick="emptyAlert()">结算</a>
  </div>
  <%--  结算模块  --%>









<%-- js代码模块 --%>
  <script>
    function getCartId(){
      var Card_id=document.getElementById("cardId").value;
      search(Card_id);
    }

    function search(Card_id) {

      $.ajax({

        type: "post",

        url: "vip/search",

        dateType: "String",

        data: {

          Card_id: Card_id
        },

        success: function () {


          document.getElementById("span1").innerHTML="校验成功！vip享9折";
          document.getElementById("sum").innerHTML="折扣后共计：<%=String.format("%.2f",sum*0.9)%>"

        },


      });

    }

    function AutoNumber(id){

      $.ajax({

        type : "post",

        url : "Cart/addNumber",

        dateType : "String",

        data : {

          id : id

        },

        success : function(data) {

          location.reload();

        },

        error : function() {
          alert("失败"+id);
          location.reload();
          //$("#tr_"+id).remove();

        }

      });
    }

function confirm(id){
  alert("确定退掉该商品？")
  deleteOne(id);
  $.ajax({

    type : "post",

    url : "Cart/deleteOne",

    dateType : "String",

    data : {

      id : id

    },

    success : function(data) {
      $("#tr_"+id).remove();
      location.reload();

    },

    error : function() {
      alert("失败"+id);

      //$("#tr_"+id).remove();

    }

  });


}
    function deleteOne(id) {

      $.ajax({

        type : "post",

        url : "Cart/deleteOne",

        dateType : "String",

        data : {

          id : id

        },

        success : function(data) {
          $("#tr_"+id).remove();
         location.reload();

        },

        error : function() {
          alert("失败"+id);

          //$("#tr_"+id).remove();

        }

      });

    }
    function emptyAlert(){
      alert("成功结算，祝生活愉快！");
      emptyCart();
    }

    function  emptyCart(){
      $.ajax({

        type: "post",

        url: "Cart/empty",

        dateType : "String",


        success: function () {

          location.reload();


        },error : function() {

          location.reload();

        }

      });
    }



    function add(id) {

      $.ajax({

        type: "post",

        url: "Cart/addGoods",

        dateType: "String",

        data: {

          id: id //传递参数

        },
        success: function () {

          location.reload();
        },error : function() {

          location.reload();
        }

      });
    }

    //JS
    layui.use(['element', 'layer', 'util'], function(){
      var element = layui.element
              ,layer = layui.layer
              ,util = layui.util
              ,$ = layui.$;

      //头部事件
      util.event('lay-header-event', {
        //左侧菜单事件
        menuLeft: function(othis){
          layer.msg('展开左侧菜单的操作', {icon: 0});
        }
        ,menuRight: function(){
          layer.open({
            type: 1
            ,content: '<div style="padding: 15px;">处理右侧面板的操作</div>'
            ,area: ['260px', '100%']
            ,offset: 'rt' //右上角
            ,anim: 5
            ,shadeClose: true
          });
        }
      });

    });
  </script>


</body>
</html>
